import React, {useState} from 'react'
import {View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native'
import Header from '$/components/Header'
import ViewUtil from '$/utils/ViewUtil'
import NavUtils from '$/utils/NavUtils'
import {connect} from 'react-redux'
import {sendCode} from '$/actions'
import {countDown} from '$/utils'


@connect(({app}) => ({app}), dispatch => ({
    sendCode: (phone, func) => dispatch(sendCode(phone, func)),
}))
class SendCode extends React.Component {
    constructor() {
        super();
        this.state = {
            second : 60,
            isSendCode: false
        }
    }
    componentDidMount(): void {
        // this.send()
    }
    /*发送验证码*/
    send = () => {
        this.props.sendCode(18144065880/*this.props.route.params.phone*/, () => {
            this.setState({isSendCode: true});
            countDown(60000, {
                start: second => this.setState({second}),
                change: second => this.setState({second}),
                end: () => this.setState({isSendCode: false}),
            })
        });
    }

    input_1 = val => {
        console.log('val',val);
    }

    input_2 = val => {

    }

    input_3 = val => {

    }

    input_4 = val => {

    }


    render(){
        const {
            route:{
                params
            },
        } = this.props;
        const {
            second,
            isSendCode
        } = this.state;
        return (
            <View style={[styles.container, styles.black]}>
                <Header
                    title={params.title}
                    style={styles.black}
                    statusBar={{barStyle: 'light-content'}}
                    leftButton={ViewUtil.backButton(() => {
                        NavUtils.back();
                    })}
                />
                <View>
                    <Text style={[styles.title]}>验证码已发至</Text>
                    <View style={[styles.flexBox]}>
                        <Text style={styles.phone}>+86 {params.phone}</Text>
                        {
                            isSendCode ? <Text style={styles.second}>{second}S</Text> :
                                <TouchableOpacity activeOpacity={0.7} onPress={this.send}>
                                    <Text style={[styles.restSend]}>重新发送</Text>
                                </TouchableOpacity>
                        }
                    </View>

                    <View style={styles.codeBox}>
                        <View style={styles.codeItem}>
                            <TextInput
                                ref={'input_1'}
                                style={styles.codeInput}
                                onChangeText={this.input_1}
                                keyboardType={'numeric'}
                                autoFocus={true}
                                maxLength={1}
                            />
                        </View>
                        <View style={styles.codeItem}>
                            <TextInput
                                ref={'input_2'}
                                style={styles.codeInput}
                                onChangeText={this.input_2}
                                keyboardType={'numeric'}
                                maxLength={1}
                            />
                        </View>
                        <View style={styles.codeItem}>
                            <TextInput
                                ref={'input_3'}
                                style={styles.codeInput}
                                onChangeText={this.input_3}
                                keyboardType={'numeric'}
                                maxLength={1}
                            />
                        </View>
                        <View style={styles.codeItem}>
                            <TextInput
                                ref={'input_4'}
                                style={styles.codeInput}
                                onChangeText={this.input_4}
                                keyboardType={'numeric'}
                                maxLength={1}
                            />
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
export default SendCode;

const styles = StyleSheet.create({
    black: {backgroundColor: '#242424'},
    container:{
        height: '100%',
        paddingLeft: 25,
        paddingRight: 25
    },
    title:{
        fontSize: 20,
        color: '#fff',
        marginTop: 40
    },
    text: {
        fontSize: 15,
        color: '#888',
        marginTop: 30
    },
    restSend:{
        color: '#2a7efc',
        fontSize: 15
    },
    flexBox:{
        flexDirection: 'row',
        marginTop: 20,
        justifyContent: 'space-between'
    },
    phone: {
        fontSize:18,
        color: '#888',
    },
    second:{
        fontSize: 18,
        color: '#fff'
    },
    codeBox: {
        marginTop: 150,
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 70
    },
    codeItem:{
        width: 80,
        height: 70,
        borderBottomWidth:1,
        borderBottomColor: '#555',
    },
    codeInput:{
        width: 80,
        height: 70,
        textAlign: 'center',
        color: '#fff',
        fontSize: 30
    }

})
